    body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
    }
    
    .c {
        width: 400px;
        height: 400px;
        border: 1px solid red;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .b {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: #111;
        position: relative
    }
    
    @keyframes yabai1 {
        /* from,
        50%,
        to {
            transform: rotate(0deg)
        }
        25% {
            transform: rotate(30deg)
        } */
        /* 50% {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(0deg)
    } */
        from {
            transform: rotate(30deg)
        }
        25% {
            transform: rotate(0deg)
        }
        75% {
            transform: rotate(0deg)
        }
        to {
            transform: rotate(30deg)
        }
    }
    
    @keyframes yabai2 {
        from,
        50%,
        to {
            transform: rotate(0deg)
        }
        25% {
            transform: rotate(-30deg)
        }
        /*
    50% {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(0deg)
    } */
    }
    
    .line {
        width: 1px;
        height: 200px;
        background-color: #000;
        position: absolute;
        top: -190px;
        left: 9.5px;
    }
    
    .b:first-child,
    .b:last-child {
        transform-origin: 10px -190px;
        animation: yabai1 2s linear infinite;
        /* transform: rotate(30deg) */
    }
    
    .b:last-child {
        animation: yabai2 2s linear infinite;
        animation-delay: 0.5s;
    }